/* ################################################################################## */
/* ###                       ____       _____ _      _______                      ### */
/* ###                      / __ \ _   _\__  | |    / __/__/                      ### */
/* ###                     | /  \ | | | | / /| |___ \_\_ \_                       ### */
/* ###                     | \__/ | |_| |/ /_|  _  \__\ \_ \                      ### */
/* ###                      \____/|_____/____/_| |_/____/__/                      ### */
/* ###                                                                            ### */
/* ################################################################################## */
/* ###                                                                            ### */
/* ###  OuZh Style Sheets                                                         ### */
/* ###  author ParaGon                                                            ### */
/* ###  v0.8 {07/01/2018}:                                                        ### */
/* ###    Ajout module Swipe                                                      ### */
/* ###    MAJ module Form (ajout switch-div + couleurs)                           ### */
/* ###    MAJ thème invert                                                        ### */
/* ###    MAJ description titre + ajout h6                                        ### */
/* ###    Ajout état .is-unselectable                                             ### */
/* ###                                                                            ### */
/* ###    Framework CSS utilisés:                                                 ### */
/* ###      - [NORM] normalize v7.0.0                                             ### */
/* ###      - [KNAC] KNACSS    v6.1.2                                             ### */
/* ###          TODO: flex, media object                                          ### */
/* ###      - [ROC] röCSSti    v4.0.0                                             ### */
/* ###      - [BOOT] Bootstrap v4.0.0-beta                                        ### */
/* ###          TODO: img, figure, table                                          ### */
/* ###                                                                            ### */
/* ###    Autres sources:                                                         ### */
/* ###      - IcoMoon.io                                                          ### */
/* ###      - gridlover.net (https://www.gridlover.net/try)                       ### */
/* ###                                                                            ### */
/* ###    Framework à regarder:                                                   ### */
/* ###      - [W3]   W3.CSS                                                       ### */
/* ###      - [FOUN] Foundation (en attente de la v7 en 2018)                     ### */
/* ###      - [MDL]  Material Design Lite                                         ### */
/* ###      - [MAT]  Materialize                                                  ### */
/* ###      - [GRIL] Grillade                                                     ### */
/* ###                                                                            ### */
/* ###    Compatibilité: IE 11+, Android 4.4+, IOS 9+                             ### */
/* ###                                                                            ### */
/* ################################################################################## */





/* ################################################################################## */
/* ###   BASE                                                                     ### */
/* ################################################################################## */

/*** RESET ***/

html {
	box-sizing: border-box; /* border-box (pas d'effet de marges) [KNAC] */
	
	font-size: 62.5%; /* équivalent de 10px, pratique pour conversions en rem [KNAC] */
	font-size: calc(1em * 0.625); /* FIX IE9-IE11 [KNAC] */

	/* FIX Windows Phone et iOS: évite adjustement du font size après changement orientation [NORM] */
	-ms-text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%;
}

*,
*::before,
*::after {
	box-sizing: inherit; /* border-box pour tous les elements [BOOT] */
}

main,
details {
	display: block; /* FIX all [NORM] */
}

summary {
	display: list-item; /* FIX all [NORM] */
}

a,
area,
button,
input,
label,
select,
summary,
textarea {
	-ms-touch-action: manipulation; /* optimisation delay touch, FIX IE11-Edge [BOOT] */
	touch-action: manipulation;
}





/* ################################################################################## */
/* ###   TYPOGRAPHIE                                                              ### */
/* ################################################################################## */

/*** DECORATION ***/

body {
	margin: 0;             /* suppression des marges [NORM] */
	font-size: 1.6rem;     /* 16px sur mobiles */
	font-family: -apple-system, Roboto, "Trebuchet MS", Arial, Helvetica, sans-serif;
	line-height: 1.5;
	word-wrap: break-word; /* coupure des longs mots */
	color: #333;           /* lightblack, noir éclairci */
	background-color: #fff;
	/*overflow-x: hidden;*/   /* évite l'apparition du scroll lié à certains hacks de positionnement, attention, si ignoré sur mobile, le mettre sur <main> */
	overflow-y: scroll;    /* impose l'apparition du scroll pour prise en compte systématique par vw */
}

/* font size */

/* mobiles paysages */
@media (min-width:  510px) { body { font-size: 1.7rem; } }

/* gros mobiles paysages et tablettes portrait */
@media (min-width:  720px) { body { font-size: 1.8rem; } }

/* grosse tablettes et bureaux */
@media (min-width: 1280px) { body { font-size: 1.9rem; } }

/* bureaux larges */
@media (min-width: 1600px) { body { font-size: 2.0rem; } }

/* sélection */

::selection {
	background-color: #444;
	color: white;
}

::-moz-selection {
	background-color: #444;
	color: orange;
}

/* formatage */

.b { font-weight: bold; }
.i { font-style: italic; }
.del { text-decoration: line-through; }
.maj { text-transform: uppercase; }
.cap { text-transform: capitalize; }

.u { text-decoration: underline; }

u.orange,
.u.orange {
	color: inherit;
	text-decoration-color: orange;
	-webkit-text-decoration-color: orange;
}

u.underline,
.underline {
	text-decoration: none;
	border-bottom: 2px solid orange;
}

u.underlineBig,
.underlineBig {
	text-decoration: none;
	border-bottom: 0.35em solid orange;
	padding-bottom: 0.2em;
}



/*** RYTHME VERTICAL ***/

p,
hr,
blockquote,
pre,
td,
th,
label,
textarea,
caption,
details,
figure {
	margin-top: 0em;
	margin-bottom: 1.5em;
}

/* small */
/* 1 ligne */
/* descendance compatible:; <div class="small"> */

small,
.small {
	font-size: 0.8em;
	line-height: 1.875em;    /* 1.5 / 0.8 */
	margin-bottom: 1.875em;  /* 1.5 / 0.8 */
}

small,
span.small,
a.small,
em.small,
strong.small,
mark.small {
	line-height: 0; /* rythme vertical */
}

.small p,
.small hr,
.small blockquote,
.small pre,
.small td,
.small th,
.small label,
.small textarea,
.small caption,
.small details,
.small figure
{
	margin-bottom: 1.875em;  /* 1.5 / 0.8 */
}

/* smaller */
/* 1 ligne de base, demi-ligne possible (smaller-demi) */
/* (à conserver après small pour compatibilité hr) */

.smaller {
	font-size: 0.6em;
	line-height: 2.5em;   /* 1.5 / 0.6 */
	margin-bottom: 2.5em; /* 1.5 / 0.6 */
}

span.smaller,
a.smaller,
em.smaller,
strong.smaller,
mark.smaller {
	line-height: 0; /* rythme vertical */
}

.smaller-demi {
	font-size: 0.6em;
	line-height: 1.25em;   /* 1.5 / 0.6 /2 */
	margin-bottom: 1.25em; /* 1.5 / 0.6 /2 */
}

/* big */
/* 1 ligne */
/* descendance compatible:; <div class="big"> */

.big {
	position: relative;
	font-size: 1.2em;
	line-height: 1.25em;   /* 1.5 / 1.2 */
	margin-bottom: 1.25em; /* 1.5 / 1.2 */
}

span.big,
a.big,
em.big,
strong.big,
mark.big {
	line-height: 0; /* rythme vertical */
}

.big p,
.big hr,
.big blockquote,
.big pre,
.big td,
.big th,
.big label,
.big textarea,
.big caption,
.big details,
.big figure
{
	margin-bottom: 1.25em; /* 1.5 / 1.2 */
}

/* bigger */
/* 1 ligne de base, double-ligne possible (bigger-double) */

.bigger {
	font-size: 1.5em;
	line-height: 1em;   /* 1.5 / 1.5 */
	margin-bottom: 1em; /* 1.5 / 1.5 */
}

span.bigger,
a.bigger,
em.bigger,
strong.bigger,
mark.bigger {
	line-height: 0; /* rythme vertical */	
}

.bigger-double {
	font-size: 1.5em;
	line-height: 2em;   /* 3 / 1.5 */
	margin-bottom: 1em; /* 1.5 / 1.5 */
}

/* biggest */
/* 2 lignes */

.biggest {
	font-size: 2em; /* attention, dépasse en hauteur de sa ligne !*/
	line-height: 1.5em;    /* 1.5 / 2 * 2 */
	margin-bottom: 0.75em; /* 1.5 / 2 */
}

span.biggest,
a.biggest,
em.biggest,
strong.biggest,
mark.biggest {
	line-height: 0; /* rythme vertical */	
}


/* Titres */
/* gridlover.net scale factor = 3:4 perfect fourth */

h1, h2, h3, h4, h5, h6 {
	color: #000; /* couleur plus sombre pour mise en relief */
	font-family: "DejaVu Serif", Georgia, serif; /* police différente pour mise en relief */
	font-weight: bold;
	letter-spacing: -0.5px;
	word-spacing: -1px;
	max-width: 36em; /* on limite la largeur */
}

/* h1: centré, orange; */
/* gère ses propres marges: l'inclure ds Content, mais le sortir de tout Content-X */
h1 {
	font-size: 2.375em;
	line-height: 1.26315789em;  /* 3 / 2.375 */
	margin-top: 0.63157895em;   /* 1.5 / 2.375 */
	margin-bottom: 1.2631579em; /* 3 / 2.375 */
	color: orange;
	text-shadow: 0 1px 1px rgba(51,51,51,.3);

	/* centrage et limitation largeur */
	margin-left: auto;
	margin-right: auto;
	padding-left: 0.3157895em;  /* 0.75 / 2.375 */
	padding-right: 0.3157895em; /* 0.75 / 2.375 */
	text-align: center;
}

/* on rajoute une marge de décalage (comme h3) pour grands écrans */
@media (min-width: 510px) {
	h1 {
		padding-left: 0.9473684em;  /* 0.75+1.5 / 2.375 */
		padding-right: 0.9473684em; /* 0.75+1.5 / 2.375 */
		max-width: 1090px; /* 36em trop long donc 1000px + 3em (padding) */
	}
}

/* h2: souligné d'un trait orange */
h2 {
	font-size: 1.75em;
	position: relative;  /*on décale d'une demie ligne vers le bas*/
	top: 0.4285714286em;                      /* 0.75 / 1.75 */
	max-width: 1000px;	                      /* 36em trop long ! */
	line-height: 1.71428571em;                /* 3 / 1.75 */
	margin-top: 0.85714286em;                 /* 1.5 / 1.75 */
	margin-bottom: calc(1.71428571em - 1px);  /* 1.5 / 1.75 */
	border-bottom: 1px solid orange;          /* soulignement orange */
}

/* correction de marge h1 suivi de h2 */
h1 + h2,
h1 + section > h2:first-child:not(.Article-chapeau) {
	margin-top: -0.85714286em;
}

/* h3: décalage de 1.5em; */
h3 {
	font-size: 1.3158em;
	line-height: 1.14em;   /* 1.5 / 1.3125 */
	margin-top: 1.14em;    /* 1.5 / 1.3125 */
	margin-bottom: 1.14em; /* 1.5 / 1.3125 */
	padding-left: 1.14em;  /* 1.5 / 1.3125 */
}

h4 {
	font-size: 1.15em;
	line-height: 1.3043478em; /* 1.5 / 1.15 */
	margin-top: 1.3043478em;  /* 1.5 / 1.15 */
	margin-bottom: 0em;
}

h5, h6 {
	font-size: 1em;
	line-height: 1.5em;
	margin-top: 1.5em;
	margin-bottom: 0em;
}



/*** ELEMENTS DE BASE ***/

/* séparations */

hr{
	overflow: visible;  /* FIX FF, IE et Edge [NORM] */
	display: block;
	clear: both;
	height: 1px;
	max-width: 90%;
	margin-top: -1px; /* pour conserver le rythme vertical */
	padding: 0;
	border: 0;
	color: darkorange;
	background-color: darkorange;
	box-shadow: 0px 1px 1px #ccc;
}

hr.small {
	max-width: 50%;
}

hr.smaller {
	max-width: 25%;
}

.tiret::before {
	content: "—"; /* cadratin */
	color: darkorange;
}


/* index et exposant [NORM] */

sub,
.sub,
sup,
.sup {
	position: relative;
	font-size: 75%;
	line-height: 0;
	vertical-align: baseline;
}

sub,
.sub {
	bottom: -0.25em;
}

sup,
.sup {
	top: -0.5em;
}


/* texte preformaté */

strong,
.strong {
	font-weight: bold;
	color: #000; /* couleur plus sombre pour mise en relief */
}

mark {
	background-color: rgb(255,205,70);
	color: black;
	border-radius: 3px;
	padding: 2px 4px;
}

abbr[title] {
	text-decoration: none;		/* [ROC] */
	border-bottom: dotted 1px;	/* [ROC] */
	cursor: help;
}

pre {
	white-space: pre-line;  /* [KNAC] */
	white-space: pre-wrap;
	-moz-tab-size: 4;
	tab-size: 4;
	font-family: "Lucida Console", "DejaVu Sans Mono", "Liberation Mono", courier, monospace, monospace; /* duplication volontaire [NORM] */
}

pre.code {
	font-size: 0.9em;
	line-height: 1.666667em;   /* 1.5 / 0.9 */
	padding: 0.8333333em 1em;  /* 1.5 / 0.9 / 2 */
	margin-bottom: 1.666667em; /* 1.5 / 0.9 */
	margin-left: 1.666667em;   /* 1.5 / 0.9 */
	margin-right: 1.666667em;  /* 1.5 / 0.9 */
	color: orange;
	word-wrap: break-word;
	border-left: 4px solid orange;
	background-color: rgb(39,40,34);
}

.borderLeft {
	padding-left: 0.75em;
	border-left: 4px solid orange;
}
@media (min-width: 768px) {  /* on aggrandit les marges pour grands écrans */
	.borderLeft {
		margin-left: 1.5em;
		padding-left: 1.5em;
	}
}


/* citations */

q {
	font-style: italic;
	quotes: "\201C" "\201D";
}

q::before,
q::after {
    color: darkorange;
    font-weight: bold;
}

blockquote,
.blockquote  {
	position: relative;
	padding: 0 1.5em;
	margin-left: 0em;
	margin-right: 0em;
	overflow: hidden;
	border-left: 4px solid orange;
	text-align: justify;
}

/* on aggrandit les marges pour grands écrans */
@media (min-width: 768px) {
	blockquote,
	.blockquote {
		margin-left: 1.5em;
		margin-right: 1.5em;
	}
}

blockquote > q::before,
blockquote > q::after {
	position: absolute;
	font-size: 1.75em;
	line-height: 0.75em;
	color: orange;
}

blockquote > q::before {
	left: 0.15em; /* dans la marge */
}

blockquote > q::after {
	content: "\00a0\201D"; /* ajout d'un espace */
}

blockquote > footer {
  color: orange;
  text-align: right;
  font-weight: bold;
}

blockquote > footer::before {
  content: "– "; /* demi-cadratin */
}

blockquote > footer::after {
  content: " –"; /* demi-cadratin */
}



/*** LIENS ***/

a {
	color: darkorange;
	text-decoration: none;
	font-weight: bold;
}

a:visited {
	color: orange;
}


/* hover uniquement sur desktop */

@media (min-width: 1280px) {
	a:hover {
		color: rgb(51,51,51);
		background-color: orange;
		border-radius: 3px;
		box-shadow: -0.25em 0px 0px orange, 0.25em 0px 0px orange; /* prolongement du cadre avant et après */
		outline-width: 0; /* FIX IE et FF supprime la bordure de sélection [NORM] */
		text-decoration: none;
		transition: all 0.125s ease-out;
	}
	
	a:hover:focus:active {
		background-color: darkorange;
		box-shadow: -0.25em 0px 0px darkorange, 0.25em 0px 0px darkorange;
	}
}

a:focus,
a:active {
	color: rgb(51,51,51);
	background-color: orange;
	border-radius: 3px;
	box-shadow: -0.25em 0px 0px orange, 0.25em 0px 0px orange; /* prolongement du cadre avant et après */
	outline-width: 0; /* FIX IE et FF supprime la bordure de sélection [NORM] */
	text-decoration: none;
	transition: all 0s;
}


/* icones automatiques */

a[href$='.pdf']::after,
a[target="_blank"]::after {
	display: inline-block; /* permet d'enlever le soulignement */
	position: relative;
	top: -0.5em;
	
	vertical-align: baseline;
	font-size: 75%;
	line-height: 0;
	/*text-decoration: none;*/ /* suppression du soulignement, semble inutile avec display */
}

a[target="_blank"]::after {
	content: "\279A"; /* flèche pour indiquer une nouvelle page */
}

a[href$='.pdf']::after {
	content: "[pdf]"; /* pdf */
	padding-left: 0.3em;
}

a[href$='.pdf'][target="_blank"]::after {
	content: "[pdf\279A]"; /* pdf ds nouvelle page */
}


/* liens d'évitement [BOOT] */

/*
à ajouter directement après la balise body:
	<a class="skip-link" href="#Lk-article">Aller à l'article</a>
	<a class="skip-link" href="#Lk-content">Aller au complément</a>
puis rajouter les encres juste avant le contenu correspondant:
	<a id="Lk-article"></a>
	<a id="Lk-content"></a>
*/
.is-skip-link:active, .is-skip-link:focus {
	/*position: static;*/
	width: auto;
	height: auto;
	overflow: visible;
	clip: auto;
	clip-path: none;
	-webkit-clip-path: none;
	white-space: normal;
	z-index: 9999;
}

a[id^='Lk-'] {
	position: relative;
	top: -3.55em;		/* descend le titre sous un menu éventuel */
}
a[id='Lk-menus'] {	top: 0.95em; }



/*** Tableaux [KNAC] ***/

caption {
	padding: 1rem;
	color: #555;
	font-style: italic;
	text-align: left;
	caption-side: bottom;
}

td,
th {
	padding: 0.3em 0.8em;
	border: 1px #aaa dotted;
	text-align: left;
}

table,
.table {
	width: 100%;
	max-width: 100%;
	table-layout: fixed; /* largueur fixée par CSS et non par le contenu, word-wrap et text-overflow fonctionnels */
	border: 1px solid #ccc;
	border-collapse: collapse;
	vertical-align: top;
	margin-bottom: 2rem;
}

.table {
	display: table;
}

#recaptcha_table,
.table-auto {
	table-layout: auto;
}

td,
th {
  vertical-align: top;
  min-width: 2rem;
  cursor: default;
}





/* ################################################################################## */
/* ###   LAYOUT                                                                   ### */
/* ################################################################################## */

/*** HELPERS [KNAC] modifiés pour rythme vertical et horizontal + Responsive ! ***/
/* 
p,m = padding,margin
a,h,v,t,r,b,l = all, horizontal, vertical ,top, right, bottom, left
s,n,l,0,n = small, normal, large, 0, none (annulation)
R = responsive: marges réduites sur petits écrans;
*/

/* Largeurs % */
.wauto { width: auto;      }
.w10   { width:  10%;      }
.w20   { width:  20%;      }
.w25   { width:  25%;      }
.w30   { width:  30%;      }
.w33   { width:  33.3333%; }
.w40   { width:  40%;      }
.w50   { width:  50%;      }
.w60   { width:  60%;      }
.w66   { width:  66.6666%; }
.w70   { width:  70%;      }
.w75   { width:  75%;      }
.w80   { width:  80%;      }
.w90   { width:  90%;      }
.w100  { width: 100%;      }


/* margin */
.ma0 { margin: 0;      }
.mas { margin: 0.75em; }  /* 1/2 ligne */
.mam { margin: 1.5em;  }  /* rythme vertical */
.mal { margin: 3em;    }  /* double ligne */

.mh0 { margin-left: 0; margin-right: 0;           }
.mhs { margin-left: 0.75em; margin-right: 0.75em; } /* éq. Content-full ! */
.mhm { margin-left: 1.5em; margin-right: 1.5em;   }
.mhl { margin-left: 3em; margin-right: 3em;       }

.mv0 { margin-top: 0; margin-bottom: 0;           }
.mvs { margin-top: 0.75em; margin-bottom: 0.75em; }
.mvm { margin-top: 1.5em; margin-bottom: 1.5em;   }
.mvl { margin-top: 3em; margin-bottom: 3em;       }

.ml0 { margin-left: 0;      }
.mls { margin-left: 0.75em; }
.mlm { margin-left: 1.5em;  }
.mll { margin-left: 3em;    }

.mr0 { margin-right: 0;      }
.mrs { margin-right: 0.75em; }
.mrm { margin-right: 1.5em;  }
.mrl { margin-right: 3em;    }

.mtn { margin-top: -1.5em; }  /* annulation marge bottom de base */
.mt0 { margin-top: 0;      }
.mts { margin-top: 0.75em; }  /* 1/2 ligne */
.mtm { margin-top: 1.5em;  }  /* rythme vertical */
.mtl { margin-top: 3em;    }  /* double ligne */

.mb0 { margin-bottom: 0; }
.mbs { margin-bottom: 0.75em; }  /* 1/2 ligne */
.mbm { margin-bottom: 1.5em;  }  /* rythme vertical */
.mbl { margin-bottom: 3em;    }  /* double ligne */


/* margin Responsive */
.mlsR { margin-left: 0em;    }
.mlmR { margin-left: 0.75em; }
.mllR { margin-left: 1.5em;  }

.mrsR { margin-right: 0em;    }
.mrmR { margin-right: 0.75em; }
.mrlR { margin-right: 1.5em;  }

@media (min-width: 768px) {
	.mlsR { margin-left: 0.75em; }
	.mlmR { margin-left: 1.5em;  }
	.mllR { margin-left: 3em;    }

	.mrsR { margin-right: 0.75em; }
	.mrmR { margin-right: 1.5em;  }
	.mrlR { margin-right: 3em;    }
}


/* padding */
.pa0 { padding: 0;      }
.pas { padding: 0.75em; }  /* 1/2 ligne */
.pam { padding: 1.5em;  }  /* rythme vertical */
.pal { padding: 3em;    }  /* double ligne */

.ph0 { padding-left: 0; padding-right: 0;           }
.phs { padding-left: 0.75em; padding-right: 0.75em; }
.phm { padding-left: 1.5em; padding-right: 1.5em;   }
.phl { padding-left: 3em; padding-right: 3em;       }

.pv0 { padding-top: 0; padding-bottom: 0;           }
.pvs { padding-top: 0.75em; padding-bottom: 0.75em; }
.pvm { padding-top: 1.5em; padding-bottom: 1.5em;   }
.pvl { padding-top: 3em; padding-bottom: 3em;       }

.pl0 { padding-left: 0;      }
.pls { padding-left: 0.75em; }
.plm { padding-left: 1.5em;  }
.pll { padding-left: 3em;    }

.pr0 { padding-right: 0;      }
.prs { padding-right: 0.75em; }
.prm { padding-right: 1.5em;  }
.prl { padding-right: 3em;    }

.pt0 { padding-top: 0;      }
.pts { padding-top: 0.75em; }  /* 1/2 ligne */
.ptm { padding-top: 1.5em;  }  /* rythme vertical */
.ptl { padding-top: 3em;    }  /* double ligne */

.pb0 { padding-bottom: 0;      }
.pbs { padding-bottom: 0.75em; }  /* 1/2 ligne */
.pbm { padding-bottom: 1.5em;  }  /* rythme vertical */
.pbl { padding-bottom: 3em;    }  /* double ligne */


/* padding Responsive */
.plsR { padding-left: 0em;    }
.plmR { padding-left: 0.75em; }
.pllR { padding-left: 1.5em;  }

.prsR { padding-right: 0em;    }
.prmR { padding-right: 0.75em; }
.prlR { padding-right: 1.5em;  }

@media (min-width: 768px) {
	.plsR { padding-left: 0.75em; }
	.plmR { padding-left: 1.5em;  }
	.pllR { padding-left: 3em;    }

	.prsR { padding-right: 0.75em; }
	.prmR { padding-right: 1.5em;  }
	.prlR { padding-right: 3em;    }
}


/*** POSITIONNEMENT GLOBAL ***/

/* pas de reset sur video qui ferait plkanter certains players [ROC] */
img,
table,
td,
blockquote,
code,
pre,
textarea,
input,
svg {
	height: auto;
	max-width: 100%; /* évite à l'image de déborder de son parent */
}

/* display */
.inbl  { display: inline-block; vertical-align: top; }
.block { display: block; }

/* position */
.relative { position: relative;	}
.absolute { position: absolute;	}
.absolute.right  { right:  0;   }
.absolute.bottom { bottom: 0;   }
.fixed    { position: fixed; 	}
.sticky,
.sticky2 {
	position: sticky;
	position: -webkit-sticky;
	top: 2.5em;
	z-index: 5000;
}
.sticky2  { top: 4.8em; } /* si MenuTopBis présent */

/* alignement inline */
.txt-left	{ text-align: left;		}
.txt-right	{ text-align: right;	}
.txt-center	{ text-align: center;	}
.txt-justify{ text-align: justify;	}

/* alignement block [KNAC] */
.left	{ margin-right: auto; }
.right	{ margin-left: auto; }
.center	{ margin-left: auto; margin-right: auto; }
.centerv{ margin-top: auto; margin-bottom: auto; }

/* float */
.bfc	 { overflow: hidden; }  /* context BFC: evite aux flottants de déborder et fusion de marges */
.fl-left { float: left;      }
.fl-right{ float: right;     }
.clear 	 { clear: both;      }  /* pour bloc placé après floats */
.clearfix::after { 			    /* pour bloc containenant des floats [KNAC] */
	content: "";
	display: table;
	clear: both;
	border-collapse: collapse;
}


/* flex (conteneur) */
.flex { display: flex; }
.flex-center { justify-content: center; } /* alignement horizontal centré */
.flex-space-between { justify-content: space-between; } /* avec espaces entre */
.flex-space-around { justify-content: space-around; } /* entre et autours */
.flex-centerv { align-items: center; } /* alignement vertical centré */

/* flex (éléments) */
.flex-centerv-self { align-self: center; } /* aligenement vertical centré */


/* alignement vertical */
/*
.valign-top    { vertical-align: top; }
.valign-bottom { vertical-align: bottom; }
.valign-middle { vertical-align: middle; }
*/



/*** CORE LAYOUT ***/

/* header et footer fixes apparissant sous le Layout-content */

body, html {
	background-color: #000;
}

#Layout-header, #Layout-footer {
	position: fixed;
	z-index: 0;
	left: 0;
	right: 0;
	margin: 0;
	background-color: rgb(51,51,51);
	box-shadow: 0 0 20px rgb(0,0,0) inset;
    color: rgb(134, 134, 134);
}

#Layout-header {
	top: 0;
	height: 120px; /* à reporter ds Layout-content */
    padding: 10px 20px;
    font-weight: bold;
}

#Layout-footer {
	bottom: 0;
	height: 100px; /* à reporter ds Layout-content */
    padding: 20px 20px;
}

#Layout-content {
	position: relative;
	z-index: 1;
	min-width: 10em;					/* taille mini sur très petits écrans */
	min-height: calc(100vh - 100px);	/* 100vh - footer height */
	margin-top: 120px;					/* header height */
	margin-bottom: 100px;				/* footer height */
	padding-bottom: 1.5em;
	background-color: white;
	box-shadow: 0 0 20px #000;
}


/* menus */

nav {
	z-index: 999; /* au dessus de (presque) tout */
	background-color: rgba(29,29,29,0.9); /* correspond à (51,51,51) sans transparence */
	text-shadow: 0 1px 1px rgba(51,51,51,.3);
}

/* générique tous menus */
nav a {
	padding-bottom: 0.5em;
	padding-left: 0.5em;
    padding-right: 0.5em;
	text-align: center;
	color: white;
	font-family: Arial, Helvetica, sans-serif;
	text-decoration: none;
	font-weight: bold;
	text-transform: uppercase;
	-webkit-tap-highlight-color: transparent; /* FIX surlignement gris Safari et Chrome */
	user-select: none; /* empèche la sélection */
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
}

nav a:visited {
	color: white;
}

@media (min-width: 1280px) {
	nav a:hover {
		border-radius: 0px;
		box-shadow: none;
		color: black;
    	background-color: orange;
	}
	a:hover:focus:active {
		background-color: darkorange;
		box-shadow: none;
	}
	
}
nav a:focus,
nav a:active {
	border-radius: 0px;
	box-shadow: none;
	color: black;
}

nav a > .Icon {
	font-weight: normal;
	font-size: 2em; /* height = (1+padding-top+padding-bottom) x 2em */
	line-height: 0em;
	padding-top: 0.1em;
	padding-bottom: 0.3em;
}

nav a.isActive {
	background-color: rgb(255,255,255);
	color: black;
	border-bottom: 0.25em solid orange;
	cursor: default;
}

/* menus horizontaux */
.MenuH {
	display: flex;
	letter-spacing: -0.31em; /* suppression des espaces inline-block */
	/*border: 1px solid red;*/
}

/* icones + texte sous forme de lien */
.MenuH a {
    display: inline-block;
    min-width: 6em;
    /*height: 4em;*/
    /*padding-bottom: 0.9em;*/
    letter-spacing: normal; /* suppression des espaces inline-block */
    border-right: 1px solid #999;
}


/* icones scrollables dans une div */
.MenuH-scroll {
	overflow-x: auto;
	overflow-y: hidden;
	white-space: nowrap;
}

.MenuH-scroll-fin {
	margin-left: 3em;
}

.MenuH-scroll-flou {
	position: absolute;
	right: 0;
	width: 3em;
	height: 3.44em; /* spécifique MenuTopBis */
	background: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,0) 0%, rgba(255,255,255,1) 80%);
	/*border-bottom: 1px solid red; */
}


/* personnalisation menu horizontal principal */
#MenuTop {
	top: -2.22em;  /* suppression partie supérieure au scroll */
	z-index: 1001; /*au dessus des autres */
	font-size: 0.9em;
	box-shadow: 0 0 1em rgb(0,0,0);
}

@media (min-width: 1280px) {	/* gestion des états */
	#MenuTop a:hover:not(.isActive) {
		border-bottom: 4px solid white;
	}
}
#MenuTop a:focus:not(.isActive),
#MenuTop a:active:not(.isActive) {
	border-bottom: 4px solid white;
}

#MenuTop > a.MenuH-right {	/* icone en surbrillance à droite */
	margin-left: auto;
	z-index: 1000; /* permet à l'ombre de passer au dessus (chrome) */
	background-color: orange;
	border-right: none;
	box-shadow: -2em 0 2em rgb(51,51,51);  /* ombre pour indiquer des contenus masqués */
}

#MenuTop > a.MenuH-right:focus,
#MenuTop > a.MenuH-right:active {
	background-color: darkorange;
}

#MenuTop > a.MenuH-right.isActive {
	background-color: white;
}


/* personnalisation menu horizontal secondaire */
#MenuTopBis {
	z-index: 900;
	background-color: rgba(255,255,255,0.85);
	border: 1px solid rgba(51,51,51,0.5);
}

#MenuTopBis a {	/* texte + icône */
	font-size: 0.6em;
	padding-bottom: 0.1em;
	color: rgb(51,51,51);
}

#MenuTopBis a > .Icon {	/* icône seule */
	font-size: 3.33em; 
	padding-bottom: 0.05em;
}

#MenuTopBis a.isActive {
	border-bottom-width: 0.4166667em ; /* 0.25 / 0.6 */
}


/* personnalisation menu latéral gauche */
#MenuG {
	display: none; /* non présent sur petits mobiles */
	position: fixed;
	top: 1.91em;
	min-height: calc(100vh - 50px); /* toute la hauteur */
	background-color: rgba(255,0,0,0);
	/*z-index: 997;*/
	border-right: 2px solid black;
	/*background-color: rgba(255,0,0,1);*/
}


/* personnalisation menu latéral droit */
#MenuD {
	display: none; /* non présent sur petits mobiles */
	position: fixed;
	top: 1.91em;
	right: 0;
	min-height: calc(100vh - 50px); /* toute la hauteur */
	/*z-index: 997;*/
	/*background-color: rgba(255,0,0,1);*/
}


/* Content */

/* le .Content de base élimine les menus latéraux via padding => .invert pour créer un bloc inversé sur tout l'écran */
/*   nécessite d'ajouter un .Content-X pour ajout de la marge de base: */
/*     .Content-full: prend toute la largeur dispo */
/*     .Content-big: limite le contenu à 1000px */
/*     .Content-article: limite le contenu à 36em */
/* Attention! h1 gère seul sa marge: dans .Content mais hors .Content-X ! */

/* Contenus principaux avec marge */
.Content-article,
.Content-big,
.Content-full {
	padding-left: 0.75em;
	padding-right: 0.75em;
}

/* Contenus centrés et limités en largueur */
.Content-article,
.Content-big {
	margin: auto;
	max-width: 37.5em; /* largeur paragraphe optimale */
}

.Content-big {
	max-width: 1030px; /* 1000px + 1.5em: 19=28.5, 20=30 */
}


/*** PAGES DECOUVERTES (DEFAUT) ***/
/* petits menus navigation gauche et panier droite */

/* 400: apparition menuD fixe à 45px [iphone 6+ like] */
@media (min-width: 400px) {
	#Layout-content.Connected > #MenuD {
		display: block;
		width: 45px;
	}
	#Layout-content.Connected .Content {
		padding-right: 45px;
	}
}

/* 480: apparition menuG fixe à 45px */
@media (min-width: 480px) {
	#Layout-content.Connected > #MenuG {
		display: block;
		width: 45px;
	}
	#Layout-content.Connected .Content {
		padding-left: 45px;
		padding-right: 45px;
	}
}

/* 510: passage en police 17px => menu=48px */
@media (min-width: 510px) {
	#Layout-content.Connected > #MenuG {
		width: 48px;
	}
	#Layout-content.Connected > #MenuD {
		width: 48px;
	}
	#Layout-content.Connected .Content {
		padding-left: 48px;
		padding-right: 48px;
	}
}

/* 720: passage en police 18px => menu=51px */
@media (min-width: 720px) {
	#Layout-content.Connected > #MenuG {
		width: 51px;
	}
	#Layout-content.Connected > #MenuD {
		width: 51px;
	}
	#Layout-content.Connected .Content {
		padding-left: 51px;
		padding-right: 51px;
	}
}

/* 778: 51 + 36em+1.5em + 51: menuD en expension au delà de 36em de contenu */
@media (min-width: 778px) {
	#Layout-content.Connected > #MenuG {
		width: 51px;
	}
	#Layout-content.Connected > #MenuD {
		width: calc(100% - 37.5em - 51px);
	}
	#Layout-content.Connected .Content {
		padding-left: 51px;
		padding-right: calc(100% - 37.5em - 51px);
	}
}

/* 828: 51 + 36em+1.5em + 102: on bloque les menus pour aggrandir le Content */
@media (min-width: 828px) {
	#Layout-content.Connected > #MenuG {
		width: 51px;
	}
	#Layout-content.Connected > #MenuD {
		width: 102px;
	}
	#Layout-content.Connected .Content {
		padding-left: 51px;
		padding-right: 102px;
	}
}

/* 1024: passage en police 18px => menu=54px, 1024=100% => 54=5.25% */
@media (min-width: 1024px) {
	#Layout-content.Connected > #MenuG {
		width: 5.25%;
	}
	#Layout-content.Connected > #MenuD {
		width: 10.5%;
	}
	#Layout-content.Connected .Content {
		padding-left: 5.25%;
		padding-right: 10.5%;
	}
}

/* 1905: on limite la taille des menus: 5.25% = 100px; */
@media (min-width: 1905px) {
	#Layout-content.Connected > #MenuG {
		width: 100px;
	}
	#Layout-content.Connected > #MenuD {
		width: 200px;
	}
	#Layout-content.Connected .Content {
		padding-left: 100px;
		padding-right: 200px;
	}
}



/*** PAGES COMPTE ***/
/* gros menu navigation gauche */



/*** PAGES PRODUITS ***/
/* gros menu panier droite */

/* 205-319: apparition menuD, min 45px, content proportionnel [10em + 45 = 205 => 45=22%] */
@media (min-width: 205px) and (max-width: 319px) {
	#Layout-content.Connected-produits > #MenuD {
		display: block;
		width: 22%;
	}
	#Layout-content.Connected-produits .Content {
		padding-right: 22%;
	}
}

/* 365: apparition menuD, content fixe à 20em, menuD en expension [20em+45p] */
@media (min-width: 365px) {
	#Layout-content.Connected-produits > #MenuD {
		display: block;
		width: calc(100% - 20em);
	}
	#Layout-content.Connected-produits .Content {
		padding-right: calc(100% - 20em);
	}
}

/* 410: apparition menuG, content fixe à 20em, menuD en expension [20em+45p+45p] */
@media (min-width: 410px) {
	#Layout-content.Connected-produits > #MenuG {
		display: block;
		width: 45px;
	}
	#Layout-content.Connected-produits > #MenuD {
		width: calc(100% - 365px);
	}
	#Layout-content.Connected-produits .Content {
		padding-left: 45px;
		padding-right: calc(100% - 365px);
	}
}

/* 455: 45 + 160x2 +90 => 45=9.89%, 90=19.78%*/
@media (min-width: 455px) { 
	#Layout-content.Connected-produits > #MenuG {
		width: 9.89%;
	}
	#Layout-content.Connected-produits > #MenuD {
		width: 19.78%;
	}
	#Layout-content.Connected-produits .Content {
		padding-left: 9.89%;
		padding-right: 19.78%;
	}
}

/* 606: passage à 3 colonnes, content fixe à 30em, menuD en expension [30em+48p+48p] */
@media (min-width: 606px) {
	#Layout-content.Connected-produits > #MenuG {
		width: 48px;
	}
	#Layout-content.Connected-produits > #MenuD {
		width: calc(100% - 558px);
	}
	#Layout-content.Connected-produits .Content {
		padding-left: 45px;
		padding-right: calc(100% - 558px);
	}
}

/* 654: 48 + 170x3 + 96 => 78%=170x3 => 48%=7.34% */
@media (min-width: 654px) {
	#Layout-content.Connected-produits > #MenuG {
		width: 7.34%;
	}
	#Layout-content.Connected-produits > #MenuD {
		width: 14.66%;
	}
	#Layout-content.Connected-produits .Content {
		padding-left: 7.34%;
		padding-right: 14.66%;
	}
}

/* 1366: on limite la taille des menus: 7.34% = 100px; */
@media (min-width: 1366px) {
	#Layout-content.Connected-produits > #MenuG {
		width: 100px;
	}
	#Layout-content.Connected-produits > #MenuD {
		width: 200px;
	}
	#Layout-content.Connected-produits .Content {
		padding-left: 100px;
		padding-right: 200px;
	}
}




/* ################################################################################## */
/* ###   MODULES                                                                  ### */
/* ################################################################################## */

/*-----------------------------*/
/* FORMULAIRES - Form          */
/* v1.1 {23/11/2017}           */
/*-----------------------------*/

/* base */

form {
	padding: 1.5em;
	padding-top: 1em;
	box-shadow: 0 10px 50px rgba(27,31,35,0.1);
	border: solid 1px #e1e4e8;
	border-radius: 6px;
	background-color: #f9f7f4;
}

input,
optgroup,
select,
textarea {
	width: 100%;
	min-height: 36px;
	line-height: 1.15;    /* [KNAC] */
	margin: 0;  /* FIX FF, Safari [NORM] */
	margin-bottom: 1em;
	padding: .25em .5em;
	vertical-align: middle;
	font-family: inherit;
	font-size: inherit;
	color: inherit;
	background-color: #fff;
	border: 1px solid #333;
	border-radius: 4px;
	text-shadow: 0 1px 1px rgba(51,51,51,.3);  /* effet relief */
	transition: border linear .2s, box-shadow linear .2s;
	box-shadow: inset 0 1px 2px rgba(27,31,35,0.15);
}

label {
	font-size: 0.90em;
	font-weight: bold;
	display: inline-block;
	margin: 0;
	margin-bottom: 0.25em;
	vertical-align: middle;
	cursor: pointer;
	user-select: none;  /* empèche la sélection */
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
}

/* ajout automatique '*' */
label.required::after { content: " *"; color: orange; }

/* <small class="Form-*"></small> à ajouter en début de formulaire si besoin */
.Form-\* {
	display: block;
	text-align: right;
	line-height: 1.875em;     /* 1.5  / 0.8 */
	margin-top: -1.25em;      /* 1 / 0.8 */
	margin-bottom: -0.625em;  /* (1.5-1) / 0.8 */
	color: grey;
	user-select: none;        /* empèche la sélection */
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
}
.Form-\*::before {
	content: "*";
	font-size: 1.25em;
	position: relative;
	top: 0.1em;
	font-weight: bold;
	color: orange;
}
.Form-\*::after { content: " Champs obligatoires"; }

textarea {
	min-height: 5.25em;  /* 4 lignes */
	resize: vertical;    /* aggrandissement uniquement vertical */
	overflow: auto;      /* FIX IE11 [NORM] */
}


/* fieldset */

fieldset {
	box-shadow: 0 5px 25px rgba(27,31,35,0.07);
	border: solid 1px #e1e4e8;
	border-radius: 6px;
	margin: 0 -0.75em 1.5em -0.75em;
	padding: 0.5em 0.75em;
}

legend {  /* FIX Edge [NORM] */
	box-sizing: border-box;
	margin: 0 0.5em;
	padding: 0 0.25em;
	max-width: 100%;
	font-style: italic;
	white-space: normal;
	color: #6a737d;
	display: table;
	vertical-align: middle;
}


/* input */

input {
	overflow: visible;  /* FIX Edge [NORM] */
}

input[type="range"] {
	padding: 5px 0;
	border: 1px solid transparent;
	background-color: transparent;
	cursor: pointer;
	transition: border linear .2s, box-shadow linear .2s;
}

input[type="range"]:focus {
	box-shadow: none;
	outline: 1px solid #fff;  /* FIX FF pointillés */
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
	height: auto;  /* FIX Chrome [NORM] */
}
/* idée rajouter bouton +/- cf. becquet.fr -webkit/moz-apparence: textfield; */

input[type="search"] {
	-webkit-appearance: textfield;  /* FIX Chrome, Safari [NORM] */
	outline-offset: -2px;  /* FIX Safari [NORM] */
}

/* permet de supprimer la croix d'effacement du champ sous Chrome et Safari */
/*
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
	-webkit-appearance: none;  /* [NORM]
}

input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
  display: none;  /* [KNAC]
}
*/


/* select */

select {
	min-height: auto;
	text-transform: none;  /* FIX Edge, FF [NORM] */
	-webkit-appearance: menulist-button;  /* [KNAC] */
	cursor: pointer;
}

/* couleur de fond: FF ok, chrome multi only */
select > option:hover {
	box-shadow: 0 0 10px 100px orange inset;
	color: #fff;
}

select > option:checked {
	box-shadow: 0 0 10px 100px orange inset;
	/* ne pas modifier la color pour Chrome ! */
}


/* autres */

::-webkit-file-upload-button {
  -webkit-appearance: button;  /* FIX Safari, IOS [NORM] */
	font: inherit;  /* FIX Safari [NORM] */
	-webkit-appearance: button;  /* FIX Safari [BOOT] */
}

progress {
	vertical-align: baseline;  /* FIX Chrome, FF [NORM] */
}

output {
  display: inline-block; /* [BOOT] */
}


/* placeholder */

input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {  /* IOS 9 */
	color: #6a737d;
	text-shadow: none;
	font-style: italic;
}
input:-ms-input-placeholder,
textarea:-ms-input-placeholder {  /* IE11, Edge */
	color: #6a737d;
	text-shadow: none;
	font-style: italic;
	font-weight: normal;
}
input::placeholder,
textarea::placeholder {
	color: #6a737d;
	text-shadow: none;
	font-style: italic;
}


/* effets */

input:hover,
textarea:hover,
select:hover {
	border: 1px solid orange;
}

input:focus,
textarea:focus,
select:focus {
	border: 1px solid orange;
	outline: none;
	box-shadow: 0 0 8px 3px rgba(255,165,0,0.4);
}


/* erreurs et aides */

input:invalid:focus {
	border: 1px solid red;
}

.Form-error-html,
.Form-error-serv {
	box-shadow: 0 0 1px 2px rgba(255,0,0,0.6);
}

div.Form-error-serv {
	box-shadow: none;  /* supprime l'encadrement du groupe de checkbox */	
}

.Form-help,
.Form-info,
.Form-error {
	position: relative;
	top: -1.25em;  /* 1 / 0.8 */
	font-size: 0.8em;
	line-height: 1.25em;
	color: grey;
	transition: all linear 0.2s;
}

input:invalid:focus ~ .Form-help,
.Form-error-html ~ .Form-help,
.Form-error-serv ~ .Form-error {
	color:red;
}


/* checkbox & radio */

/* on masque la checkbox de base */
input[type="radio"],
input[type="checkbox"] {
	position: absolute;
	width: auto;
	z-index: -1;
	opacity: 0;
}

/* on décale le label*/
input[type="radio"] + label,
input[type="checkbox"] + label {
	display: inline-block;
	margin-bottom: 1em;
	position: relative;
	top: -2px;
	width: auto;
	font-size: 1em;
	font-weight: normal;
	text-align: left;
	margin-right: 1.5em;  /* décalage horizontal cases suivantes */
	padding-left: 1.7em;
}
input[type="checkbox"]:invalid + label { color: #bbb; } /* label gris uniquement si checkbox required */

/* positionnement vertical (horizontal par défaut) */
.Form-block input[type="radio"] + label {
	display: block;
	margin-bottom: 0.25em;
}
.Form-block input[type="checkbox"] + label {
	display: block;
	margin-bottom: 0.5em;
}
.Form-block input[type="radio"] + label:last-child,
.Form-block input[type="checkbox"] + label:last-child {
	margin-bottom: 1em;
}

/* nouvelle checkbox/radio ::before */
input[type="radio"] + label::before,
input[type="checkbox"] + label::before {
	content: '';
	position: absolute;
	top: 2px;
	left: 0;
	height: 23px;
	width: 23px;
	background-color: #fff;
	border: 1px solid #000;
	border-radius: 4px;
	transition: border linear .2s, box-shadow linear .2s;
}
input[type="radio"] + label::before { border-radius: 50%; }

/* effets checkbox/radio */
input[type="radio"]:hover + label::before,
input[type="checkbox"]:hover + label::before {
	border: 1px solid orange;
}
input[type="radio"]:focus + label::before,
input[type="checkbox"]:focus + label::before {
	border: 1px solid orange;
	box-shadow: 0 0 8px 3px rgba(255,165,0,0.4);
}
.Form-error-serv input[type="radio"] + label::before,
.Form-error-serv input[type="checkbox"] + label::before,
input[type="radio"].Form-error-html + label::before,
input[type="radio"].Form-error-serv + label::before,
input[type="checkbox"].Form-error-html + label::before,
input[type="checkbox"].Form-error-serv + label::before {
	box-shadow: 0 0 1px 2px rgba(255,0,0,0.6);
}

/* nouvelle encoche ::after */
input[type="radio"] + label::after,
input[type="checkbox"] + label::after {
	content: "";
	position: absolute;
	display: none;
	top: 8px;
	left: 6px;
	width: 11px;
	height: 11px;
	border-radius: 50%;
	background: orange;
}
input[type="checkbox"] + label::after {
	top: 4px;
	left: 8px;
	width: 8px;
	height: 14px;
	border: solid orange;
	border-width: 0 3px 3px 0;
	border-radius: 0;
	background: #fff;
}

input[type="checkbox"]:checked + label::after,
input[type="radio"]:checked + label::after {
	display: block;
}
input[type="checkbox"]:checked + label::after { transform: rotate(45deg); }


/* switch */

/* encapsulage de label */
.Form-switch-div {
	position: relative;
	margin-bottom: 0.75em;
}
.Form-switch-div > label {
	margin-right: 0.5em;
	margin-bottom: 0;
}
.Form-switch-div > .Form-switch {
	position: absolute;
	display: inline;
}
.Form-switch-div.right > .Form-switch {	right: 0; }

/* bouton glissant avec text "Inactif" par défaut */
.Form-switch > input[type="checkbox"] + label {
	display: inline-block;
	width: 7em;
	height: 36px;
	line-height: 34px;
	font-size: 0.95em;
	font-weight: bold;
	text-align: right;
	margin-right:0;
	padding-right: 18px; /* height/2 */
	color: #666;
	background-color: #ddd;
	border-radius: 2em;
	overflow: hidden;
	text-shadow: 0 1px 1px rgba(51,51,51,.3); /* effet relief */
	box-shadow: 0 2px 2px rgba(27,31,35,0.2);
	transition: padding linear 0.2s;
}
.Form-switch > input[type="checkbox"]:checked + label {
	padding-right: 0;
	padding-left: 7em; /* label::after + 38px - label::after.left */
}

/* contour + text "Actif" ::before */
.Form-switch > input[type="checkbox"] + label::before {
	content: "Actif";
	width: 7em;
	height: 36px;
	top: 0;
	text-align: left;
	padding-left: 0px;
	overflow: hidden;
	border-radius: 2em;
	border-color: #555;
	color: #ddd;
	background-color: transparent;
	text-shadow: none;
	transition: all linear 0.2s;
}
.Form-switch > input[type="checkbox"]:checked + label::before {
	padding-left: 18px;
	color: #fff;
	background-color: orange;
	text-shadow: 0 1px 1px rgba(51,51,51,.3); /* effet relief */
}

/* cercle blanc ::after */
.Form-switch > input[type="checkbox"] + label::after {
	display: block;
	top: 6px;
	left: 8px;
	width: 23px;
	height: 23px;
	border: 1px solid #555;
	border-radius: 50%;
	background: #fff;
	box-shadow: inset 0 2px 2px rgba(27,31,35,0.2);
	transform: none;
	transition: left linear 0.2s;
}
.Form-switch > input[type="checkbox"]:hover + label::after { border-color: orange; }
.Form-switch > input[type="checkbox"]:checked + label::after {
	left: calc(7em - 31px); /* 6em - width - left */
}
.Form-switch > input[type="checkbox"].Form-error-html + label::after,
.Form-switch > input[type="checkbox"].Form-error-serv + label::after {
	box-shadow: 0 0 1px 2px rgba(255,0,0,0.6), inset 0 2px 3px rgba(27,31,35,0.3);
}


/* impression */

@media print {
	input, optgroup, select, textarea {
		min-height: 24px;
	}

	/* monochrome */	
	.Form-\*::before { color: #333; }
	label.required::after { color: #333; }
	input[type="range"] { border: 1px solid #333;}

	/* radio/checkbox */
	input[type="radio"] + label::before,
	input[type="checkbox"] + label::before {
		position: absolute;
		top: 0;
		left: 0;
		height: 16px;
		width: 16px;
		border-color: #000;
	}
	input[type="radio"]:checked + label::after,
	input[type="checkbox"]:checked + label::after {
		top: 1px;
		left: 5px;
		width: 7px;
		height: 12px;
		border: solid #000;
		border-width: 0 3px 3px 0;
		border-radius: 0;
		transform: rotate(45deg);
	}

	/* switch */
	.Form-switch > input[type="checkbox"] + label { height: 24px; line-height: 24px }
	.Form-switch > input[type="checkbox"] + label::before { content: "";  height: 24px; }
	.Form-switch > input[type="checkbox"]:checked + label::before { content: "Actif"; }
	.Form-switch > input[type="checkbox"] + label::after {
		top: 5px;
		left: 10px;
		width: 14px;
		height: 14px;
		border: 1px solid #000;
		border-radius: 50%;
	}
}



/*-----------------------------*/
/* LISTES - Liste              */
/* v1.1 {12/05/2017}           */
/*-----------------------------*/
ul {
	list-style: none; /* pas d'affichage par défaut */
	padding: 0; /* ni de marge */
	margin: 0;
}

ol, ul.Liste, ul.Liste-noStyle {
	padding-left: 1.95em; /* retrait global et non de chaque li; on rajoute 1.2em de retrait multilignes */
	text-indent: -1.2em;   /* seule la première ligne revient à sa place*/
	margin-bottom: 1.5em;
	overflow: hidden;    /* contexte BFC pour éviter déformation en cas de float */
}

/* on augmente la marge pour les grands écrans */
@media (min-width: 768px) {
	ol, ul.Liste, ul.Liste-noStyle {
		padding-left: 2.7em;
	}
}

ul.Liste.mb0, ul.Liste-noStyle.mb0 {
	margin-bottom: 0em;
}

ol {
	list-style-position: inside; /* puce comprise dans le retrait */
}

ul.Liste > li::before {
	font-family: Arial, Helvetica, sans-serif; /* meilleur alignement */
	padding-right: 0.3em;  /* correspond au caractère espace */ 
	content: "– "; /* demi-cadratin – */
 }

/* listes imbriquées */
ol ol,
ol ul.Liste,
ol ul.Liste-noStyle,
ul.Liste ol,
ul.Liste ul.Liste,
ul.Liste ul.Liste-noStyle,
ul.Liste-noStyle ol,
ul.Liste-noStyle ul.Liste,
ul.Liste-noStyle ul.Liste-noStyle {
	margin-bottom: 0;
}



/*-----------------------------*/
/* TIMELINE - Timeline         */
/* v1.1 {26/09/2017}           */
/*-----------------------------*/
.Timeline {
	border-left: 0.25em solid orange;
	position: relative;
	left: 3em;            /* décalage barre horizontale */
	margin-right: 3em;    /* responsive: pour compenser le left si écran trop petit */
	padding-top: 1.25em;  /* éq. saut à la ligne par défaut sous le titre, 1.5 - Timeline-title border-bottom */
	margin-bottom: 1.5em;
}

.Timeline > li {
	position: relative;
	padding-left: 1em;    /* espace vs barre horizontale */
	margin-bottom: 1.5em; /* éq. saut à la ligne par défaut entre chaque li */
}

/* décoration centrale */
.Timeline > li:not(.title)::before {
	font-family: Arial, Helvetica, sans-serif;
	content: "-o-";
	position: absolute;
	left: -0.71em;
	color: grey;
}

/* colonne de gauche */
.Timeline > li > .left {
	position: absolute;
	text-align: right;
	width: 2.5em;
	left: -3.75em;  /* -2.5em - 1em - Timeline border-left */
	font-style: italic;
	/*border: solid 1px black; */
}

/* ajoute un tiret pour simuler une liste */
.Timeline > li > .li::before {
	font-family: Arial, Helvetica, sans-serif;
	content: "-";
	position: absolute;
	left: 0.2em;
	color: grey;
}

/* tailles de la colonne de gauche */
.Timeline.big {
	font-size: 1em;       /* reset big */
	line-height: 1.5em;   /* reset big */
	margin-bottom: 1.5em; /* reset big */
	left: 4.5em;
	margin-right: 4.5em;
}

.Timeline.big > li > .left {
	width: 4em;
	left: -5.25em;
}

/* gestion des titres et espacements */
.Timeline-title {
	display: inline-block; /* garantie la hauteur + limite la longueur souligné via border */
	margin-top: 0;         /* annuler le saut de ligne en trop rajouté par le inline-block */
	position: relative;    /* alignement avec le .left */
	left: -0.5em;          /* Timeline left - li > .left width - 1em */
	border-bottom: 0.25em solid orange;
}

.Timeline > li.title {
	line-height: 1.25em;
	font-weight: bold;
	border-bottom: 0.25em solid orange;
}

.Timeline.no-title,
.Timeline.no-br {
	padding-top: 0;
}

.Timeline.no-br:not(.no-title) {
	top: -0.25em;          /* Timeline-title border-bottom */
	margin-bottom: -.25em; /* évite les mauvaise fusion de marge avec titre qui suit mais annule marge avec paragraphe*/
}

.Timeline.no-br > li {
	margin-bottom: 0;
}

/* impression */
@media print {
	/* monochrome */
	.Timeline { border-left: 0.25em solid #ccc; }
	.Timeline-title { border-bottom: 0.25em solid #ccc; }
	.Timeline > li.title { border-bottom: 0.25em solid #ccc; }

	/* sans espace */
	.Timeline:not(.no-br) { padding-top: 0; }
	.Timeline > li { margin-bottom: 0; }
	.Timeline:not(.no-title) {
		top: -0.25em;
		margin-bottom: -.25em;
	}
}



/*-----------------------------*/
/* IMAGES - Image              */
/* v0.2 {23/05/2017}           */
/*-----------------------------*/
figure {
	margin-left: 0;
	margin-right: 0;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); /* ombre par défaut */
}

figcaption {
	font-style: italic;
	font-size: 0.8em;
	text-align: center;
}

img {
	vertical-align: middle;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); /* ombre par défaut */
}

figure > img {
	box-shadow: none; /* pour éviter la double ombre */
}

img.center {
	display: block;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 0.5em;
}


/* Flottants simples */

figure.left,
img.left {
	float: left;
	margin-right: 0.75em;
	margin-top: 0.45em;
	margin-bottom: 0.25em;
}

figure.right,
img.right {
	float: right;
	margin-left: 0.75em;
	margin-top: 0.45em;
	margin-bottom: 0.25em;
}

figure.right + p,
img.right + p {
	text-align: justify; /* texte justifié automatiquement */
}

/* on augmente la marge pour les grands écrans */
@media (min-width: 768px) {
	figure.left,
	img.left {
		margin-right: 1.5em;
	}
	figure.right,
	img.right {
		margin-left: 1.5em;
	}
}


/* Flottants responsive */

figure.leftR,
img.leftR,
figure.rightR,
img.rightR {
	display: block;
	margin-left: auto;  /* centré horizontalement */
	margin-right: auto; /* pour petits écrans */
	text-align: center;
	margin-bottom: 0.5em;
	max-width: 9em; /* 25% */	
}

/* on passe en float */
@media (min-width: 320px) { /* (7.2 x 2 + 2.25 (marges)) x 16 */
	figure.leftR,
	img.leftR {
		float: left;
		margin-right: 0.75em;
		margin-top: 0.45em;
		margin-bottom: 0.25em;
	}

	figure.rightR,
	img.rightR {
		float: right;
		margin-left: 0.75em;
		margin-top: 0.45em;
		margin-bottom: 0.25em;
	}

	figure.rightR + p,
	img.rightR + p {
		text-align: justify; /* texte justifié automatiquement */
	}
}

/* on augmente la marge pour les grands écrans */
@media (min-width: 768px) {
	figure.leftR,
	img.leftR {
		margin-right: 1.5em;
	}
	figure.rightR,
	img.rightR {
		margin-left: 1.5em;
	}
}


/* Débordement Responsive d'un paragraphe d'article */

.Image-deborde > div {
	max-width: 9em;
	margin-left: auto;	  /* centrage */
	margin-right: auto;   /* horizontal */
	margin-bottom: 0.5em; /* en haut du texte */
	text-align: center;
	/*border: 1px solid red;*/
}

.Image-deborde > div > figure,
.Image-deborde > div > img {
	margin-bottom: 0;      /* suppression marge sur les figures et images */
	display: inline-block; /* inline pour image < 9em */
	/*border: 1px solid blue;*/
}

/* on passe en float */
@media (min-width: 320px) and (max-width: 998px) { /* on évite d'ajouter du float pour > 999px */
	.Image-deborde > div {
		margin-top: 0.45em;     /* meilleur alignement de l'image */
		margin-bottom: 0.25em; /* limitation marge pour éviter saut à la ligne trop tôt */
	}

	.Image-deborde.left > div {
		float: left;
		margin-left: 0;
		margin-right: 0.75em;
	}

	.Image-deborde.right > div {
		float: right;
		margin-left: 0.75em;
		margin-right: 0;
	}

	.Image-deborde.right > p {
		text-align: justify; /* texte justifié automatiquement */
	}

	.Image-deborde > p {
		margin-bottom: 0;   /* le paragraphe n'a plus de marge */
	}

	.Image-deborde::after { /* éq. clearfix + nouvelle marge */
		content: "";
		display: table;
		clear: both;
		border-collapse: collapse;
		margin-bottom: 1.5em;
	}
}

/* double colonne pour centerv */
@media (min-width: 400px) and (max-width: 998px) { /* on évite d'ajouter du flex pour > 999px */
	.Image-deborde.centerv {
		display: flex; /* pour centrer verticalement */
	}

	.Image-deborde.centerv > div {
		flex-shrink: 0;        /* évite écrasement image sous chrome */
		align-self: center;    /* centrage vertical */
		margin-top: 0.25em;    /* bien au milieu */
		margin-bottom: 1.5em;  /* bien au milieu */
	}

	.Image-deborde.centerv.right > div {
		order: 9; /* passage à droite */
	}

	.Image-deborde.centerv > p {
		margin-bottom: 1.5em; /* le paragraphe n'a plus de marge */
	}

	.Image-deborde.centerv::after {
		margin-bottom: 0;
	}
}

/* on augmente la marge pour les grands écrans */
@media (min-width: 768px) and (max-width: 998px) {
	.Image-deborde.left > div {
		margin-right: 1.5em;
	}

	.Image-deborde.right > div {
		margin-left: 1.5em;
	}
}

/* on fait déborder l'image */
@media (min-width: 999px) { /* (9em + 0.75em)*2 + 36em */
	.Image-deborde {
		position: relative;
		min-height: 6em; /* pour éviter chevauchement si petit texte */
	}

	.Image-deborde > div {
		position: absolute; /* déplacement hors flux */
		width: 9em;         /* on fixe la taille */
		margin-top: 0.5em;  /* meilleur alignement de l'image */
	}

	.Image-deborde.left > div {
		left: -9.75em;     /* 9em + marge */
		text-align: right; /* pour images < 9em */
	}

	.Image-deborde.right > div {
		right: -9.75em;   /* 9em + marge */
		text-align: left; /* pour images < 9em */
	}

	.Image-deborde.right > p {
		text-align: justify; /* texte justifié automatiquement */
	}

	.Image-deborde.centerv > div {
		display: flex;
		height: 100%;
		margin-top: 0.25em;    /* bien au milieu */
		margin-bottom: 1.5em;  /* bien au milieu */
	}

	.Image-deborde.centerv > div > figure,
	.Image-deborde.centerv > div > img {
		margin-top: auto;    /* centrage vertical */
		margin-bottom: auto; /* FF bug avec align-self: center; en absolu */
	}

	.Image-deborde.centerv.left > div > figure,
	.Image-deborde.centerv.left > div > img {
		margin-left: auto; /* on pousse à gauche */
	}

}

/* on augmente les marges */
@media (min-width: 1026px) { /* (9em + 1.5em)*2 + 36em */
	.Image-deborde.left > div {
		left: -10.5em;
	}

	.Image-deborde.right > div {
		right: -10.5em;
	}
}


/* Décorations */

.Image-shadow {
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.Image-shadow2 {
	box-shadow: -1px 2px 5px 1px rgba(0, 0, 0, 0.7), -1px 2px 20px rgba(255, 255, 255, 0.6) inset;	
}

.Image-shadow3 {
	box-shadow: 0 0 10px black;
}

.no-shadow {
	box-shadow: none;
}

.Image-border {
	padding: 4px;
	background-color: #fff;
	border: 1px solid #ccc;
}

.Image-circle {
    overflow: hidden;
    border-radius: 50%;
    /*width:100px;*/ /* width et height doivent etre de meme taille */
    /*height:100px;*/
}



/*-----------------------------*/
/* ICONES - Icon               */
/* v1.2.2 {11/10/2017}         */
/* IcoMoon                     */
/* The Noun Project            */
/*-----------------------------*/
@font-face {
	font-family: 'icomOuZh';
	src:
		url('fonts/icomOuZh.woff') format('woff'),
		url('fonts/icomOuZh.svg') format('svg');
	font-weight: normal;
	font-style: normal;
}

.Icon::before {
  font-family: 'icomOuZh' !important; /* évite changement de polices par les extensions */
  speak: none;
  font-style: normal;
  /*font-weight: normal;*/ /* commenté pour que les icones des liens restent bien en gras */
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  padding-right: 0.3em;

  /* Better Font Rendering */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Espaces et soulignements */
.Icon.pr0::before,
.Icon.Btn-ico::before,
.Icon.Btn-ico-round::before {
  padding-right: 0; /* pas d'espace si pr0 */
}

.u .Icon::before {
	padding-right: 0; /* si souligné, suppression du padding */
}

.u .Icon:not(.pr0)::after  {
	content: "\00a0"; /* et ajout d'un espace, sauf si classe pr0 */
}

/*a.Icon::before {*/
	/*display: inline-block;*/ /* permet d'enlever le soulignement, Attention, pb avec li a.Icon, cf Icon.html */
	/*text-decoration: none; suppression du soulignement, inutile si display: inline-block; */
/*}*/

/* IcoMoon */
.Icon-ouzh:before {
  content: "\e600";
}
.Icon-valeurs:before {
  content: "\e601";
}
.Icon-panier:before {
  content: "\e602";
}
.Icon-blog:before {
  content: "\e603";
}
.Icon-param:before {
  content: "\e604";
}
.Icon-vision:before {
  content: "\e605";
}


/* Bibliothèque standard utf-8 */
/* http://www.utf8icons.com    */
ul.Icon-fleche-droite > li::before,
.Icon-fleche-droite::before			{ content: "\2192"; }
ul.Icon-fleche-vague-bi > li::before,
.Icon-fleche-vague-bi::before		{ content: "\21AD"; }
ul.Icon-fleche-bond-droite > li::before,
.Icon-fleche-bond-droite::before	{ content: "\21B7"; }
ul.Icon-fleche-bond-gauche > li::before,
.Icon-fleche-bond-gauche::before	{ content: "\21B6"; }

ul.Icon::before {
	display: none; /* suppression de l'icone du ul */
}



/*-----------------------------*/
/* BOUTONS - Btn               */
/* v0.3 {13/11/2017}           */
/*-----------------------------*/

.Btn {
	display: inline-block;
	padding: 0.25em 0.75em;
	font-weight: bold;
	color: orange;
	background-color: transparent;
	border: 2px solid orange;
	border-radius: 0.4em;
	cursor: pointer;
	box-shadow: 0 1px 2px rgba(0,0,0,.2); 
	-webkit-tap-highlight-color: transparent; /* FIX surlignement gris Safari et Chrome */
	user-select: none;                        /* empèche la sélection */
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
}

.Btn[disabled],
button[disabled] {
  cursor: default;
}

button {
	font-size: inherit;
	font-family: inherit;
	line-height: 1.5;
	overflow: visible;          /* FIX Edge [NORM] */
	text-transform: none;       /* FIX Edge, FF [NORM] */
	-webkit-appearance: button; /* FIX IOS, Safari [NORM] */
}
button::-moz-focus-inner {      /* FIX FF bordure interieure [NORM] */
	border-style: none;
	padding: 0;  
}


/* Effets */

@media (min-width: 1280px) {
	.Btn:hover {
		border-radius: 0.4em;
		box-shadow: none;
		color: black;
    	background-color: orange;
	}
	
	.Btn:hover:focus:active {
			background-color: darkorange;
		}
}
.Btn:focus,
.Btn:active {
	border-radius: 0.4em;
	box-shadow: none;
	color: black;
    background-color: orange;
}


/* Tailles */

.Btn.small {
	line-height: 1.875em;    /* 1.5 / 0.8 */
	border: 1px solid orange;
}

.Btn.smaller {
	line-height: 2.5em;     /* 1.5 / 0.6 */
	padding: 0em 0.75em;
	border: 1px solid orange;
}

.Btn.big {
	line-height: 1.25em;    /* 1.5 / 1.2 */
}

.Btn.bigger {
	line-height: 1em;       /* 1.5 / 1.5 */
	border: 3px solid orange;
}

.Btn.biggest {
	line-height: 1.5em;     /* 1.5 / 2 * 2 */
	padding: 0em 0.75em;
	border: 4px solid orange;
}


/* Styles */

.Btn.isRound {
	border-radius: 2em;
}

.Btn.isRect {
	border-radius: 0em;
}

.Btn.isAbove {
	color: #fff;
	background-color: rgba(0,0,0,0.5);
}

.Btn.noBorder {
	border: none;
	background-color: none;
}


/* Combos ico et ico-round */
/* Attention, présents ds Icon ! */
.Btn-ico {
	padding-left: 0.5em;
	padding-right: 0.5em;
	margin-right: -0.5em;
	border: none;
	border-radius: 0em;
	background-color: rgba(0,0,0,0);
}

.Btn-ico.right {
	margin-right: 0;
	margin-left: -0.5em;
}

@media (min-width: 1280px) {
	.Btn-ico:hover {
		border-radius: 0em;
	}
}
.Btn-ico:focus,
.Btn-ico:active {
	border-radius: 0em;
}

.Btn-ico-round {
	padding-left: 0.35em;
	padding-right: 0.35em;
	padding-top: 0.1em;
	padding-bottom: 0.1em;
	margin-right: -0.1em;
	color: white;
	border-radius: 2em;
	background-color: rgba(0,0,0,0.5);
}

.Btn-ico-round.right {
	margin-right: 0;
	margin-left: -0.1em;
}

@media (min-width: 1280px) {
	.Btn-ico-round:hover {
		border-radius: 2em;
	}
	.Btn-ico-round:hover:visited {
		color: black;
	}
}
.Btn-ico-round:focus,
.Btn-ico-round:active {
	border-radius: 2em;
	color: black;
}
.Btn-ico-round:visited {
	color: white;
}


/* impression */

@media print {
	/* monochrome */
	.Btn {
		border-color: #000;
	}
}



/*-----------------------------*/
/* MESSAGES FLASH - Flash      */
/* v0.1 {13/11/2017}           */
/*-----------------------------*/

.Flash {
	margin: 1.5em;
	padding: 0.5em;
	border: 1px solid orange;
	border-radius: 10px;
	box-shadow: 0 10px 50px rgba(27,31,35,0.1);
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.Flash-alert {
	border-color: #f55;
	background-color: #fee;
}



/*-----------------------------*/
/* ARTICLES - Article          */
/* v0.3 {18/05/2017}           */
/*-----------------------------*/

.Article-width {
	width: 36em;
}


/* Mise en avant de l'accroche de l'article */
h2.Article-chapeau {
	/* reset */
	position: static;
	color: #333;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: normal;
	letter-spacing: normal;
	margin-top: 0;
	border-bottom: none;

	/* bigger */
	font-size: 1.5em;
	line-height: 1em;   /* 1.5 / 1.5 */
	margin-bottom: 1em; /* 1.5 / 1.5 */
}

/* Grosse lettrine orange */
.Article-lettrine {
	float: left;	
	font-size: 4em;
	margin-right: 0.125em;   /* 0.5 / 4 */
	line-height: 0.61025em;	 /* 0.61025em pour Arial, 0.588em pour Trebuchet MS */
	font-family: Arial, Helvetica, sans-serif; /* les majuscules sont plus fermées et épaisses en Arial */
	text-transform: uppercase;
	font-weight: bold;
	color: darkorange;
}



/*-----------------------------*/
/* CELLULES SWIPABLES - Swipe  */
/* avec flexbox, input:checked */
/* v1.0 {07/01/2018}           */
/*-----------------------------*/

/* Conteneur flexbox */
.Swipe {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	justify-content: center; /* pour centrer les bullets */
	overflow: hidden; /* rien ne dépasse: en cas d'animation */
}

/* fenetre */
.Swipe-cell {
	position: absolute;
	flex: 1 1 100%;
	order: 1;
	top: 0;	/* évite bug IOS avec onglets */
	width: 100%;
	visibility: hidden;
	/*overflow: hidden;*/ /* si pb de débordement de contenu => mais prev/next.bottom invisible ! */
}

/* affichage fenetre active */
.Swipe-input:checked + .Swipe-tab + .Swipe-cell,
.Swipe-input:checked + .Swipe-bullet + .Swipe-cell {
	position: relative;
	visibility: visible;
}


/* Onglets */

.Swipe > .Swipe-tab {
	flex: 1 1 auto;
	order: 0;
	top: 0;
	margin: 0;
	padding: 10px 10px;
	overflow: hidden;
	word-wrap: break-word;
	text-transform: uppercase;
	color: rgb(191,105,41);
	font-weight: bold;
	text-decoration: none;
	text-align: center;
	cursor: pointer;
	background: rgb(70,70,70);
	border-left: 1px solid rgb(39,40,34);
	border-top: 1px solid rgb(39,40,34);
	z-index: 1;
}

.Swipe-tab:hover {
	color: orange;
	background: rgb(39,40,34);
}

.Swipe-input:checked + .Swipe-tab {
	color: white;
	background: rgb(39,40,34);
}

/* on n'affiche pas la radio de base */
.Swipe-tab::before,
.Swipe-input:checked + .Swipe-tab::after {
	display: none;
}


/* bullet */

.Swipe > .Swipe-bullet {
	flex: 0 1 auto;
	order: 2;
	position: relative;
	top: auto;
	height: 0.95em;
	width: 0.95em;
	margin-top: 0.5em;
	margin-bottom: 0.5em;
	margin-left: 0.25em;
	margin-right: 0.25em;
	padding: 0;
	background: #fff;
	border-radius: 50%;
	box-shadow: 0 1px 2px rgba(0,0,0,0.55) inset;
	z-index: 1;
}

.Swipe-bullet:hover {
	box-shadow: 0 0 2px 2px rgba(255,165,0,0.4), 0 1px 2px rgba(0,0,0,0.55) inset;
}

.Swipe-input:checked + .Swipe-bullet {
	background: orange;
}

/* on n'affiche pas la radio de base */
.Swipe-bullet::before,
.Swipe-input:checked + .Swipe-bullet::after {
	display: none;
}


/* prev-next */
/* ajouter un conteneur avec marge .mhm pour éviter superposition des flèches si non .bottom */

.Swipe-prev,
.Swipe-next {
	position: absolute;
	top: 0;
	bottom: 0;
	display: flex;
	align-items: center;
	padding-left: 0.10em;  
	padding-right: 0.10em;
	font-size: 2em;
	line-height: 0.75em;
	margin-bottom: 0;
	font-weight: bold;
	color: orange;
	opacity: 0.5;
	z-index: 1;
}
.Swipe-prev { left: 0; }
.Swipe-next { right: 0; }

.Swipe-prev:hover,
.Swipe-next:hover {
	 opacity: 1;
}

/* option sous la fenêtre (au milieu par défaut) */
.Swipe-prev.bottom,
.Swipe-next.bottom {
	top: auto;
	bottom: -0.85em;
}

/* non visible: permet d'avoir quand même les infos prev et next */
.Swipe-prev.is-hidden,
.Swipe-next.is-hidden {
	display: none;
}


/* animations */

/* apparition droite vers position finale */
@keyframes Swipe-in-right {
	0% {
		transform: translateX(100%);
	}
	100% {
		transform: translateX(0);
	}
}

/* apparition gauche vers position finale */
@keyframes Swipe-in-left {
	0% {
		transform: translateX(-100%);
	}
	100% {
		transform: translateX(0);
	}
}

/* sortie position finale vers la gauche */
@keyframes Swipe-out-left {
	0% {
		transform: translateX(0);
		visibility: visible;
	}
	100% {
		transform: translateX(-100%);	
	}
}

/* sortie position finale vers la droite */
@keyframes Swipe-out-right {
	0% {
		transform: translateX(0);
		visibility: visible;
	}
	100% {
		transform: translateX(100%);
	}
}


/* impression */

@media print {
	.Swipe-cell {
		border: 1px solid black;
		column-count: auto;
	}
	.Swipe-tab {
		border: 1px solid black;
	}
	.Swipe-input:checked + .Swipe-tab {
		border: 2px solid black;
		text-decoration: underline;
		font-weight: bold;
	}
	.Swipe-bullet {
		border: 1px solid black;
	}
	.Swipe-input:checked + .Swipe-bullet {
		border: 6px solid black;
	}
}



/*-----------------------------*/
/* PRODUITS - Prod             */
/* v0.1 {24/08/2017}           */
/*-----------------------------*/

.Produits {
	display: flex;
	flex-wrap: wrap;
	border-top: 1px solid #CCC;
	font-size: 0.80em;
}

.Prod {
	flex-grow: 0;
	/*height: 15em;*/
	min-width: 10.0em;
	width: 100%;
	/*max-width: 10.0em;*/
	padding: 0.5em 0.75em;
	border-bottom: 1px solid #CCC;
	border-right: 1px solid #CCC;
}

/*
@media (min-width: 320px)  { .Prod { width: 50%; } }
@media (min-width: 480px)  { .Prod { width: 33.33333%; } }
@media (min-width: 680px)  { .Prod { width: 25%; } }
@media (min-width: 924px)  { .Prod { width: 20%; } } 900
@media (min-width: 1080px) { .Prod { width: 16.66667%; } }
@media (min-width: 1354px) { .Prod { width: 14.2857%; } } 1330
@media (min-width: 1700px) { .Prod { width: 12.5%; } }
.Prod { background-color: lightgreen; }
*/

/*
@media (min-width: 320px)  { .Connected .Prod { width: 50%; } }
@media (min-width: 606px)  { .Connected .Prod { width: 33.33333%; } }
@media (min-width: 924px)  { .Connected .Prod { width: 25%; } } 873
@media (min-width: 1080px) { .Connected .Prod { width: 20%; } } 1069
@media (min-width: 1354px) { .Connected .Prod { width: 16.66667%; } }
@media (min-width: 1700px) { .Connected .Prod { width: 14.2857%; } } 1662
@media (min-width: 1900px) { .Connected .Prod { width: 12.5%; } }
.Connected .Prod { background-color: #99ccff; }
*/

/*
@media (min-width: 320px)  { .Connected-produits .Prod { width: 50%; } }
@media (min-width: 606px)  { .Connected-produits .Prod { width: 33.33333%; } }
@media (min-width: 924px)  { .Connected-produits .Prod { width: 25%; } }
@media (min-width: 1154px) { .Connected-produits .Prod { width: 20%; } }
@media (min-width: 1440px) { .Connected-produits .Prod { width: 16.66667%; } }
@media (min-width: 1700px) { .Connected-produits .Prod { width: 14.2857%; } }
@media (min-width: 1900px) { .Connected-produits .Prod { width: 12.5%; } }
.Connected-produits .Prod { background-color: #ff8080; }
*/


@media (min-width: 320px) {
	.Prod { width: 50%; }
	.Connected .Prod { width: 50%; }
	.Connected-produits .Prod { width: 50%; }
}

@media (min-width: 480px) {
	.Prod { width: 33.33333%; }
}

@media (min-width: 606px) {
	.Connected .Prod { width: 33.33333%; }
	.Connected-produits .Prod { width: 33.33333%; }
}

@media (min-width: 680px) {
	.Prod { width: 25%; }
}

@media (min-width: 924px) {
	.Prod { width: 20%; }
	.Connected .Prod { width: 25%; }
	.Connected-produits .Prod { width: 25%; }
}

@media (min-width: 1080px) {
	.Prod { width: 16.66667%; }
	.Connected .Prod { width: 20%; }
}

@media (min-width: 1154px) {
	.Connected-produits .Prod { width: 20%; }
}

@media (min-width: 1354px) {
	.Prod { width: 14.2857%; }
	.Connected .Prod { width: 16.66667%; }
}

@media (min-width: 1440px) {
	.Connected-produits .Prod { width: 16.66667%; }
}

@media (min-width: 1700px) {
	.Prod { width: 12.5%; }
	.Connected .Prod { width: 14.2857%; }
	.Connected-produits .Prod { width: 14.2857%; }
}

@media (min-width: 1900px) {
	.Connected .Prod { width: 12.5%; }
	.Connected-produits .Prod { width: 12.5%; }
}

.Prod-title {
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-weight: normal;
	font-size: 1.2em;
	position: static;
	max-width: 100%;
	line-height: 1.5em;
	margin-top: 0;
	margin-left: 0;
	margin-right: 0;
	margin-bottom: 0;
	border-bottom: none;
}





/* ################################################################################## 
/* ###   ETATS                                                                    ### */
/* ################################################################################## */

/*** VISIBILITE ***/

/* invisible pour tous */
.is-hidden,
[hidden],
.print {
	display: none;
}

/* caché sauf pour les liseuses, Yahoo! method [KNAC,BOOT] */
/* à utiliser pour la description d'icones sans texte par exemple*/
.is-visually-hidden, .is-skip-link {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);
	-webkit-clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* inactif [KNAC] */
.is-disabled,
[disabled] {
	opacity: 0.5;
	pointer-events: none;
	cursor: not-allowed;
	filter: grayscale(1);
}

/* empèche la sélection */
.is-unselectable {
	user-select: none; /* Chrome */
	-webkit-user-select: none; /* Safari, Opera, ... */
	-moz-user-select: none; /* FF */
	-ms-user-select: none; /* IE 10+, Edge */
}

/* visible uniquement au survol de l'élément mask */
/* .is-hover-hidden et .is-hover-mask doivent avoir un père relative */
.can-hover .is-hover-hidden { z-index: 1; }
.can-hover .is-hover-hidden:not(.absolute) { position: relative; }
.can-hover .is-hover-hidden:hover { z-index: 3; }
.can-hover .is-hover-mask { z-index: 2; }
.can-hover .is-hover-mask:not(.absolute) { position: relative; }
.can-hover .is-hover-mask:hover { z-index: 0; }


/* Prend toute la largeur en débordant de son parent */
/* https://css-tricks.com/full-width-containers-limited-width-parents */
.is-full-width {
	width: 100vw;       /* prend la totalité de la largeur de l'écran */
	max-width: 100vw;
	position: relative;
	left: 50%;			/* 50% pour centrer */
	margin-left: -50vw; /* -50vh pour coller à gauche */

	/* autre solution */
	/*margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);*/

    /* on peut ensuite rajouter des marges internes */
    /*padding-left: calc( (100vw - max px ou em) /2 );*/
	/*padding-right: calc( (100vw - max em ou px) /2 );*/
}



/*** ANTI-DEBORDEMENT ***/

/* word-wrap: break-word; par défaut sur body: coupure des longs mots */
.is-not-cut {
	word-wrap: normal; /* pas de coupure des longs mots */
}

 /* cesure naturelle, lang="fr" nécessaire   */
.is-hyphens {
	hyphens: auto;
	-webkit-hyphens: auto;
	-ms-hyphens: auto;
}

/* pas de mise à la ligne */
.is-not-break {
	white-space: nowrap;	
}




/* ################################################################################## */
/* ###   THEMES                                                                   ### */
/* ################################################################################## */

/*** COULEURS ***/

/*
http://www.w3schools.com/colors/colors_names.asp
NOM				 R   G   B		CSS				UTILISE
black 			 0    0   0		#000			titres, texte strong
lightblack	 	 51  51  51		#333			texte, menu, header, footer
darkgrey         77  77  77     #4D4D4D         texte gris strong
grey            128 128 128     grey            texte gris
orange			255 165   0		orange			citations
darkorange		255 140   0		darkorange		liens
red             255   0   0     #f00            messages d'erreurs
invert		 	 39  40  34  	rgb(39,40,34)	invert, code


Polices
-------
Défaut: body									"Trebuchet MS", Arial, Helvetica, sans-serif;
Accentuation: Article chapeau, lettrine, menus 	Arial, Helvetica, sans-serif;
Différentiation forte: titres					"DejaVu Serif", Georgia, serif;
*/

.black { color: #000; }
.lightblack { color: #333; }
.darkgrey { color: #4D4D4D; }
.grey { color: grey; }
.orange { color: orange; }
.darkorange { color: darkorange; }
.red { color: #f00; }

.bg-white { background-color: #fff; }

strong.orange,
.strong.orange,
.orange strong,
.orange .strong {
	color: darkorange;
}

strong.darkorange,
.strong.darkorange,
.darkorange strong,
.darkorange .strong {
	color: orange;
}

strong.grey,
.strong.grey,
.grey strong,
.grey .strong {
	color: #4D4D4D;
}


/*** INVERT ***/

/* inversion d'éléments */
.invert {
	color: rgb(234,234,234);
	background-color: rgb(39,40,34);
}

section.invert:not(.no-padding) {
	padding-top: 0.75em;    /* demie ligne */
	padding-bottom: 0.75em; /* demie ligne */
}

.invert h1,
.invert h2,
.invert h3,
.invert h4,
.invert h5 {
	color: #fff;
}

/* inversion d'éléments déjà inversés ! */
.invert .invert {
	color: rgb(39,40,34);
	background-color: rgb(255,255,255);
}

.invert .invert h1,
.invert .invert h2,
.invert .invert h3,
.invert .invert h4,
.invert .invert h5 {
	color: #000;
}



/*** DARK ***/

/* thème complet sombre */
.Th-dark {
	background-color: rgb(39,40,34);
	color: rgb(234,234,234);
}





/* ################################################################################## */
/* ###   PRINT RESET                                                              ### */
/* ################################################################################## */

@media print {
/*@media all {*/

	/*** MISE EN PAGE ***/

	/* suppression de la déco [KNAC]*/
	* {
		background: transparent !important;
		color: #000 !important;
		box-shadow: none !important;
		text-shadow: none !important;
	}

	body {
		width: auto;
		margin: auto;
		font-family: serif;
		font-size: 1.2rem;
		line-height: 1.25em;
		padding: 0.5em;
		overflow: hidden;
	}

	p,
	blockquote,
	pre,
	td,
	th,
	label,
	textarea,
	caption,
	details,
	figure,
	h1,
	h3,
	h4,
	h5 {
		margin-bottom: 0.5em;
	}

	h1 { font-size: 2em; }

	h2 {
		line-height: 1em;
		border-bottom: 1px solid #000;
		margin-bottom: 0.75em;
	}

	ol, ul.Liste, ul.Liste-noStyle { padding-left: 1.95em; }



	/*** LIENS [KNAC] ***/

	a,
	a:visited {
		color: #000;
		font-weight: normal;
		text-decoration: underline;
	}

	/* affichage des URLs, sauf pour image contenue */
	/*
	a[href]::after {
		content: " {" attr(href) "}";
		font-style: italic;
		display: inline-block; /* permet d'enlever le soulignement *//*
	}

	a::after img {
		content: "";
	}

	a[href^="javascript:"]::after,
	a[href^="#"]::after {
		content: "";
	}
	*/

	abbr[title] {	
		border-bottom: none;
	}



	/*** THEMES ET COULEURS ***/

	u.orange,
	.u.orange {
		text-decoration-color: #ccc;
		-webkit-text-decoration-color: #ccc;
	}

	u.underline,
	.underline {
		border-bottom: 2px solid #ccc;
	}

	u.underlineBig,
	.underlineBig {
		border-bottom: 0.35em solid #ccc;
	}

	mark {
		background-color: #ddd !important;
		border-radius: 3px;
		padding: 2px 4px;
	}

	pre.code {
		border-left-color: #ccc;
	}

	q::before,
	q::after,
	blockquote > q::before,
	blockquote > q::after {
    	color: #000;
	}

	blockquote,
	.blockquote,
	.borderLeft {
		border-left-color: #ccc;
		margin-left: 0em;
		margin-right: 0em;
		page-break-inside: avoid;
	}
  
	.orange {
		color: #000;
		font-weight: bold;
	}

	.tiret::before { color: #000; }

	hr{ background-color: #000 !important; }



	/*** SAUTS PAGES ET LIGNES [KNAC] ***/

	/* no orphans, no widows */
	p,
	h1,
	h2,
	h3,
	blockquote {
		orphans: 3;
		widows: 3;
	}

	/* no breaks inside these elements */
	blockquote,
	ul,
	ol {
		page-break-inside: avoid;
	}

	/* no breaks after these elements */
	h1,
	h2,
	h3,
	caption {
		page-break-after: avoid;
	}

	.mtn { margin-top: -0.0em; }



	/*** LAYOUT ***/

	#Layout-header, #Layout-footer { display: none !important; }

	#Layout-content { margin: 0; }

	nav { display: none !important; }

	.Content { padding: 0 !important; }

	article {
		margin: auto; 
		max-width: 100%;
		column-count: 2;
	}



	/*** ELEMENTS SPECIFIQUES ***/

	.print { display: block; }   /* apparait uniquement à l'impression */
	.no-print { display: none; } /* non imprimé */
}





/* ################################################################################## */
/* ###   DEBUG                                                                    ### */
/* ################################################################################## */

/* couleurs */
.green { color: #0f0; }
.blue { color: #00f; }
.bg-red { background-color: #f00; }
.bg-green { background-color: #0f0; }
.bg-blue { background-color: #00f; }


/* bordures */
.border { border: 1px solid; }
.border2 { border: 2px solid; }

.border.red,
.border2.red{
	border-color: red;
	color: inherit;
}


/* grilles pour vérif rythme vertical */
.grille {
	background-image: linear-gradient(to bottom, #fff, #fff 97%, #000 100%);
	background-size: auto 1.5em;
	/*background-position: 0px -0.3333em;*/ /* décallage baseline */
}

.grille .invert {
	background-image: linear-gradient(to bottom, #000, #000 97%, #fff 100%);
	background-size: auto 1.5em;
	background-position: 0px 0.75em; /* décallage */
	/*background-position: 0px 0.41666667em;*/ /* décallage baseline */
}

.grille .invert .invert {
	background-image: linear-gradient(to bottom, #fff, #fff 97%, #000 100%);
	/*background-position: 0px 0.41666667em;*/ /* décallage baseline */
}



/* ################################################################################## */
/* ###   HACKS & TESTS                                                            ### */
/* ################################################################################## */

.h100 {
	height: 100px;
}